<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '消息',
  },
}
</route>
<template>
  <view class="overflow-hidden" :style="{ paddingTop: safeAreaInsets?.top + 'px', height: height }">
    <view class="tabbar">
      <wd-navbar title="消息列表" :bordered="false">
        <template #right>
          <!-- <div class="title_box flex">
            <view class="title flex-1">消息列表</view> -->
          <view class="beread" @click="beReadAll"></view>
          <!-- </div> -->
        </template>
      </wd-navbar>
    </view>
    <view class="msg-box" v-if="tabs.length">
      <scroll-view class="nav" scroll-y style="width: 170rpx; flex: unset">
        <view
          class="cu-item"
          :class="[index == tabCur ? 'text-blue cur' : '', item.unread > 0 ? 'badge' : '']"
          v-for="(item, index) in tabs"
          :key="index"
          @tap="TabSelect($event, item, index)"
          :data-id="index"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <view class="msg">
        <view class="cu-bar bg-white">
          <view class="action topic">
            <text class="text-blue module">{{ tabs[tabCur].name }}</text>
            <text v-if="tabs[tabCur].number > 0" class="mark">
              {{ tabs[tabCur].number }} 条未读
            </text>
          </view>
        </view>
        <view class="body">
          <scroll-view
            scroll-y
            refresher-enabled
            :refresher-threshold="80"
            :refresher-triggered="triggered"
            refresher-background="#f1f1f1"
            @scrolltolower="onReachLower"
            @refresherrefresh="onRefresh"
            @refresherrestore="onPullStore"
          >
            <view
              class="message"
              v-for="msg in msgList"
              @click="toPage(msg)"
              :key="msg.id"
              :class="msg.readFlag === 0 ? 'unread' : ''"
            >
              <view class="title">
                <text class="t">{{ msg.title }}</text>
                <!-- <text class="date">{{$ago(msg.senderDate)}}</text> -->
                <text class="date">{{ formatTime(msg.createTime) }}</text>
              </view>
              <!-- <view
            v-if="msg.messageType === 'text' || msg.messageType === null"
            class="content"
            @click.stop="mark(msg)"
          >
            {{ msg.content }}
          </view> -->
              <!-- <view v-else-if="msg.messageType === 'pic'" class="content">
            <view>点击查看图片</view>
            <view></view>
          </view> -->
              <view class="content">
                <view>{{ msg.content }}</view>
                <view></view>
              </view>
            </view>
            <view v-if="!msgList.length && !inFreshing" class="no-msg">暂无消息</view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getNotices, setRead, setReadAll, getNoticesTab } from '@/service/message';
// #ifdef APP-PLUS
import setBedge from '@/utils/set_badge';
// #endif
const inFreshing = ref(false);
const haveMore = ref(false);
const tabs = ref([]);
const tabCur = ref(0);
const params = reactive({
  current: 1,
  size: 20,
  clientType: 1,
  category: '',
});
onShow(() => {
  nextTick(() => {
    triggered.value = true;
  });
  // #ifdef APP-PLUS
  setBedge();
  // #endif
  getTab();
  // getNoticesList('refresh');
});
const totalCount = ref(0);
const getTab = () => {
  getNoticesTab().then((res) => {
    if (res.code !== 0) {
      return;
    }
    tabs.value = [...res.data];
    totalCount.value = tabs.value[0].number;
    if (tabCur.value === 0) {
      getNoticesList('refresh');
    }
  });
};
const TabSelect = (e, item, index) => {
  tabCur.value = index;
  params.current = 1;
  getNoticesList('refresh');
};
const msgList = ref([]);
const triggered = ref<any>(false);
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const height = `calc(100vh - (${safeAreaInsets?.top || 0}px)`;
const getNoticesList = (event) => {
  console.log(inFreshing.value, haveMore.value, event, '1123');
  if (params.current == 1) {
    haveMore.value = true;
  }
  if (inFreshing.value) return;
  if (!haveMore.value) return;
  inFreshing.value = true;
  haveMore.value = false;

  if (event) {
    msgList.value = [];
  }
  params.category = tabs.value[tabCur.value].name === '全部' ? '' : tabs.value[tabCur.value].name;
  // console.log(params, 1123);
  getNotices(params)
    .then((res) => {
      triggered.value = false;
      inFreshing.value = false;
      if (res.code === 0) {
        msgList.value.push(...res.data.records);
        if (res.data.records.length >= params.size) {
          params.current += 1;
          haveMore.value = true;
        } else {
          haveMore.value = false;
        }
      }
    })
    .catch((err) => {
      triggered.value = false;
      inFreshing.value = false;
      haveMore.value = false;
    });
};
const onReachLower = () => {
  if (haveMore.value) {
    getNoticesList('');
  }
};
const beReadAll = () => {
  uni.showModal({
    title: '提示',
    content: '确定把全部未读消息标记为已读?',
    cancelText: '取消',
    confirmText: '确定',
    success(res) {
      if (res.confirm) {
        setReadAll().then((res) => {
          if (res.code !== 0) return;
          uni.showToast({
            title: '标记成功',
            icon: 'none',
          });
          // #ifdef APP-PLUS
          plus.runtime.setBadgeNumber(-1);
          plus.runtime.setBadgeNumber(0);
          uni.removeTabBarBadge({
            index: 1,
          });
          //  #endif
          getTab();
          getNoticesList('refresh');
        });
      }
    },
  });
};
const formatTime = (time) => {
  return time.substring(0, 10);
};
const onRefresh = () => {
  params.current = 1;
  getNoticesList('refresh');
};
const onPullStore = () => {
  triggered.value = 'restore';
};
const isClicking = ref(false);
const toPage = (msg) => {
  try {
    setRead(msg.id);
  } catch (error) {
    console.log();
  }
  if (isClicking.value) return;
  isClicking.value = true;
  if (msg.readFlag === 0) {
    msg.readFlag = 0;
    const total = totalCount.value > 0 ? totalCount.value - 1 : 0;
    uni.setTabBarBadge({
      index: 1,
      text: total,
    });
  }
  if (msg.appRoute) {
    uni.navigateTo({
      url: `${msg.appRoute}`,
      complete: () => {
        isClicking.value = false;
      },
    });
  } else {
    setTimeout(() => {
      params.current = 1;
      getNoticesList('refresh');
      isClicking.value = false;
    }, 300);
  }
};
function formateData(date) {
  console.log(date);

  // if (!date) {
  //   return '';
  // }
  // return dayjs(date).format('YYYY-MM-DD');
}
</script>
<style lang="scss" scoped>
uni-page-body {
  overflow-y: hidden;
}
.tabbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
  z-index: 100;
}
.cu-bar {
  display: flex;
  position: relative;
  align-items: center;
  min-height: 100rpx;
  justify-content: space-between;
}
.cu-bar .action:last-child {
  margin-right: 30rpx;
}
.cu-bar .action:first-child {
  margin-left: 30rpx;
  font-size: 30rpx;
}
.msg-box {
  display: flex;
  flex: 1;
  overflow: auto;
  height: 100%;
  font-size: 28rpx;
  padding-top: 90rpx;
  background: #f7f7f7;
  // height:calc(100vh - 200rpx - 100rpx - env(safe-area-inset-bottom));
  .nav {
    width: 170rpx;
    min-width: 170rpx;
    background: #fff;
    white-space: initial;
    &uni-scroll-view {
      flex: unset;
    }
    .uni-scroll-view {
      width: 170rpx;
    }
    .cu-item {
      // width: 100%;
      text-align: center;
      background-color: #fff;
      margin: 0;
      border: none;
      padding: 0 10rpx !important;
      height: 120rpx;
      line-height: 120rpx;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.badge::after {
        content: '';
        position: absolute;
        width: 14rpx;
        height: 14rpx;
        background: #ff6274;
        border-radius: 50%;
        z-index: 99;
        right: 15rpx;
        top: 30rpx;
      }
      &.cur {
        background-color: #f1f1f1;
      }
      &.cur::after {
        content: '';
        width: 8rpx;
        height: 30rpx;
        border-radius: 10upx 0 0 10rpx;
        position: absolute;
        background-color: currentColor;
        top: 0;
        right: 0upx;
        bottom: 0;
        margin: auto;
      }
    }
  }
  .msg {
    flex: 1;
    padding: 10rpx 10rpx 0rpx;
    max-width: calc(100vw - 200rpx);
    .action {
      display: flex;
      justify-content: space-between;
    }
    .action.topic {
      width: 100%;
      .module {
        font-weight: bold;
      }
    }
    .body {
      height: calc(100% - 100rpx);
      background-color: rgb(241, 241, 241);
      scroll-view {
        height: calc(100% - 100rpx);
        .message {
          padding: 10rpx 20rpx 20rpx 20rpx;
          background: #fff;
          margin-top: 10rpx;
          position: relative;
        }
        .message.unread::after {
          content: '';
          width: 14rpx;
          height: 14rpx;
          background-color: #ff6274;
          border-radius: 50%;
          position: absolute;
          right: 10rpx;
          top: 10rpx;
          z-index: 999;
        }
        .message .title {
          display: flex;
          padding-top: 15rpx;
          line-height: 40rpx;
        }
        .message .title .t {
          flex: 1;
        }
        .message .date {
          width: 190rpx;
          float: right;
          font-size: 0.8125rem;
          color: #8a8a8a;
          text-align: right;
        }
        .message .content {
          text-align: justify;
          padding: 15rpx 0;
          word-break: break-all;
          color: #515151;
        }
      }
    }
  }
}
.uni-scroll-view-content {
  height: calc(100% - 150rpx);
}
.beread {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
  background: url(../../static/beread.png) no-repeat;
  background-size: 50rpx 50rpx;
}
:deep(.wd-navbar__left--hover) {
  background: none;
}
</style>
